<template>
  <div class="detail">
    <mt-header fixed :title="msg">
      <div slot="left" @click="$router.go(-1)">
        <mt-button icon="back">返回</mt-button>
      </div>
    </mt-header>
    <ul class="item_image">
      <li v-for="item in detail.福利" :key="item._id">
        <img :src="item.url" alt @click="ImgDetail(item)">
      </li>
    </ul>

    <h2>Android</h2>
    <ul class="item_list">
      <li v-for="item in detail.Android" :key="item._id" class="item_list_style">
        <a :href="item.url">
          <div class="item_content">
            <div class="item_content_left">
              <p>{{ item.desc }}</p>
              <div class="item_info">
                <span class="author_style">{{ '(' + item.who + ')' }}</span>
                <span>{{ formatDate(item.publishedAt) }}</span>
              </div>
            </div>
            <div class="item_content_right" v-if="item.images">
              <img :src="item.images[0]" alt>
            </div>
          </div>
        </a>
      </li>
    </ul>

    <h2>iOS</h2>
    <ul class="item_list">
      <li v-for="item in detail.iOS" :key="item._id" class="item_list_style">
        <a :href="item.url">
          <div class="item_content">
            <div class="item_content_left">
              <p>{{ item.desc }}</p>
              <div class="item_info">
                <span class="author_style">{{ '(' + item.who + ')' }}</span>
                <span>{{ formatDate(item.publishedAt) }}</span>
              </div>
            </div>
            <div class="item_content_right" v-if="item.images">
              <img :src="item.images[0]" alt>
            </div>
          </div>
        </a>
      </li>
    </ul>

    <h2>休息视频</h2>
    <ul class="item_list">
      <li v-for="item in detail.休息视频" :key="item._id" class="item_list_style">
        <a :href="item.url">
          <p>{{ item.desc }}</p>
          <div class="item_info">
            <span class="author_style">{{ '(' + item.who + ')' }}</span>
            <span>{{ formatDate(item.publishedAt) }}</span>
          </div>
        </a>
      </li>
    </ul>

    <h2>拓展资源</h2>
    <ul class="item_list">
      <li v-for="item in detail.拓展资源" :key="item._id" class="item_list_style">
        <a :href="item.url">
          <p>{{ item.desc }}</p>
          <div class="item_info">
            <span class="author_style">{{ '(' + item.who + ')' }}</span>
            <span>{{ formatDate(item.publishedAt) }}</span>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { mapState, mapActions } from "vuex";

export default {
  name: "Detail",
  data() {
    return {
      msg: "",
      detail: {
        Android: [],
        App: [],
        iOS: [],
        休息视频: [],
        拓展资源: [],
        瞎推荐: [],
        福利: []
      }
    };
  },
  computed: {
    ...mapState(["detailInfo"])
  },
  methods: {
    ...mapActions(["loadDayInfo"]),
    ImgDetail(item) {
      // this.$router.push({
      //   name: "image_detail",
      //   params: {
      //     url: item.url
      //   }
      // });
      // this.$router.push({
      //   path: `/image_detail/${item.url}`
      // });
      this.$router.push({
        path: '/image_detail',
        query: {
          url: item.url
        }
      });
    },
    formatDate(time) {
      const date = dayjs(time).format("YYYY/MM/DD");
      return date;
    },
    async initData(date) {
      await this.loadDayInfo({ date: date });
      this.detail = this.detailInfo;
    }
  },
  created() {
    // const date = this.$route.params.date;
    const day = this.$route.params.id;
    // console.log(day);
    const date = dayjs(day).format("YYYY/MM/DD");
    if (date === undefined) {
      this.msg = "详情";
    } else {
      this.msg = day;
      this.initData(date);
    }
  }
};
</script>

<style scoped>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
h2 {
  text-align: left;
  margin: 0;
  background-color: #cccccc;
  padding: 5px;
}
div {
  text-align: left;
}
p {
  text-align: left;
  margin: 5px 10px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.author_style {
  margin: 0 10px;
}
.item_info {
  margin: 5px 0;
}
.item_content {
  display: flex;
}
.item_content_left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 70%;
}
.item_content_right {
  width: 30%;
}
.item_content_right img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  vertical-align: middle;
  background-position: center center;
  background-repeat: no-repeat;
}
.item_image {
  margin-top: 40px;
}
.item_image img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  vertical-align: middle;
  background-position: center center;
  background-repeat: no-repeat;
}
.item_img {
  overflow: hidden;
  margin-top: 5px;
}
.item_list_style {
  border-bottom: 1px solid #dcdcdc;
}
.item_list li a {
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
  color: #333;
}
.item_list li a:hover {
  color: #1eaedb;
  text-decoration: underline;
}
.item_img li {
  list-style: none;
  float: left;
  width: 50%;
}
.item_img li img {
  width: 100%;
  padding: 0 5px;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
</style>